<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下结构</title>
    <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <style>
        /* 去掉li的左右边距 */
        .part_imgText ul li {
            padding-left: 0px;
            padding-right: 0px;
        }

        /* 左边的标题 */
        .part_imgText_box {
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            background-color: var(--c_b_product);
            padding: 50px 0px;
        }

        .part_imgText_box h2 {
            padding-bottom: 11px;
        }

        /* a链接 */
        .part_imgText_box_link ul li {
            text-align: left;
        }

        .part_imgText_box_link ul li a {
            font-size: 13px;
            line-height: 36px;
            color: var(--c_theme);
        }

        /* 右边的图文合集 */
        .part_imgText ul li:nth-child(even) {
            display: flex;
            width: 100%;
            flex-direction: column-reverse;
        }

        .part_imgText_tit {
            width: 100%;
            height: 316px;
            padding: 30px 20px 0px;
            background-color: rgba(179, 141, 84, 1);
        }

        .part_imgText_tit h3 {
            font-size: var(--f_text);
            line-height: var(--l_text);
            color: var(--c_theme);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            padding-bottom: 30px;
        }

        .part_imgText_tit p {
            font-size: var(--f_text);
            line-height: var(--l_text);
            color: var(--c_text);
        }

        .part_imgText_img {
            width: 100%;
            height: 678.92px;
        }

        .part_imgText_img img {
            width: 100%;
            height: 100%;
            background-size: cover;
        }

        /* 控制按钮 */
        .part_imgText_tit a {
            border-radius: 40px;
        }

        @media (max-width:1200px) {
            .part_imgText ul {
                padding: 0px 20px;
            }
            /* 左边的标题 */
            .part_imgText_box {
                padding: 0px 0px;
                text-align: center;
            }

            /* a链接 */
            .part_imgText_box_link ul {
                display: flex;
            }

            .part_imgText_box_link ul li {
                text-align: center;
            }

            /* 右边的图文合集 */
            .part_imgText_tit {
                width: 100%;
                max-height: 316px;
                padding: 30px 20px 0px;
            }

            .part_imgText ul li:nth-child(even) {
                display: flex;
                width: 100%;
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="part_imgText modular">
        <ul class="row">
            <li class="col-xl-3">
                <div class="part_imgText_box">
                    <div class="public_title">
                        <h2>案例/产品</h2>
                        <p>Case/product</p>
                    </div>
                    <div class="part_imgText_box_link">
                        <ul class="row">
                            <li class="col-xl-4"><a href="">全部/ </a></li>
                            <li class="col-xl-4"><a href="">最新案例/</a></li>
                            <li class="col-xl-4"><a href="">经典案例/</a></li>
                            <li class="col-xl-4"><a href="">甄选案例/</a></li>
                            <li class="col-xl-4"><a href="">好评案例/</a></li>
                            <li class="col-xl-4"><a href="">更多</a></li>
                        </ul>
                    </div>


                </div>
            </li>
            <li class="col-xl-3">
                <div class="part_imgText_tit">
                    <h3>XX酒店餐饮陶瓷釉面器皿</h3>
                    <p>陶瓷，英语是china。中国人早在约公元前8000－2000年（新石器时代）就发明了陶器。用瓷土烧制的器皿叫瓷器</p>
                    <a class="button_big" href="">
                        查看详情 &gt;&gt;
                    </a>
                </div>
                <div class="part_imgText_img">
                    <img src="../images/part_imgText19_1_two.jpg" alt="">
                </div>
            </li>
            <li class="col-xl-3">
                <div class="part_imgText_tit">
                    <h3>XX酒店餐饮陶瓷釉面器皿</h3>
                    <p>陶瓷，英语是china。中国人早在约公元前8000－2000年（新石器时代）就发明了陶器。用瓷土烧制的器皿叫瓷器</p>
                    <a class="button_big" href="">
                        查看详情 &gt;&gt;
                    </a>
                </div>
                <div class="part_imgText_img">
                    <img src="../images/part_imgText19_1_three.jpg" alt="">
                </div>
            </li>
            <li class="col-xl-3">
                <div class="part_imgText_tit">
                    <h3>XX酒店餐饮陶瓷釉面器皿</h3>
                    <p>陶瓷，英语是china。中国人早在约公元前8000－2000年（新石器时代）就发明了陶器。用瓷土烧制的器皿叫瓷器</p>
                    <a class="button_big" href="">
                        查看详情 &gt;&gt;
                    </a>
                </div>
                <div class="part_imgText_img">
                    <img src="../images/part_imgText19_1_four.jpg" alt="">
                </div>
            </li>
        </ul>
    </div>
</body>

</html>